<template>
  <div class="app-container">
    <div class="title">创建公告</div>
    <div class="view">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <div class="titleHeader">公告标题</div>
        <div class="content" style="width: 30%;">
          <el-form-item prop="title">
            <el-input
              ref="title"
              v-model="addForm.title"
              placeholder="请输入公告标题"
              type="text"
              name="title"
              tabindex="1"
              auto-complete="off"
            />
          </el-form-item>
        </div>
        <div class="titleHeader">同步APP</div>
        <div class="content" style="width: 30%;">
          <el-form-item prop="toApp">
            <el-radio-group v-model="addForm.toApp">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="titleHeader" style="margin-bottom:25px;">发布到工程</div>
        <div style="margin-left: -100px;">
          <el-form-item prop="projectIds">
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;" />
            <el-checkbox-group v-model="addForm.projectIds" @change="handleCheckedChange">
              <el-checkbox
                v-for="item in projects"
                :key="item.id"
                :label="item.id"
              >{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

        </div>
        <div class="titleHeader" style="margin-top:25px;">公告内容</div>
        <div class="edit_container">
          <quill-editor
            ref="myQuillEditor"
            v-model="addForm.content"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          />
        </div>

        <div class="btnsubmit">
          <el-button
            type="primary"
            class="create"
            @click.native.prevent="submitData"
          >创建</el-button>
          <el-button
            type="primary"
            class="cancel"
            @click="comeBack"
          >取消</el-button>
        </div>
      </el-form>
    </div>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import { quillEditor } from 'vue-quill-editor' // quillEditor,Quill
import { addQuillTitle } from '@/components/editor/quill-title.js'// 鼠标移动上显示中文
import quillConfig from '@/components/editor/quill-config.js'// 鼠标移动上显示中文
// import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module' // container定义toolbar
// Quill.register('modules/ImageExtend', ImageExtend)

import { createNotice } from '@/api/notice'

export default {
  name: 'CreateNotice',
  components: {
    quillEditor
  },
  data() {
    return {
      checkAll: false,
      isIndeterminate: false,
      addForm: {
        title: '',
        projectIds: [],
        content: '',
        toApp: ''
      },
      listLoading: false,
      rules: {
        title: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        projectIds: [
          { required: true, message: '必选', trigger: 'change' }
        ],
        toApp: [
          { required: true, message: '必选', trigger: 'change' }
        ]
      },
      // 富文本框参数设置
      editorOption: quillConfig
    }
  },
  computed: {
    ...mapGetters([
      'projects'
    ])
  },
  watch: {

  },
  mounted() {
    // console.log(this.projects)
    addQuillTitle()
    // quillConfig.initButton() //自定义富文本
  },
  methods: {
    // 富文本编辑器
    // editor.enable(false);// 在获取焦点的时候禁用
    onEditorReady(editor) { // 准备编辑器
    },
    onEditorBlur(e) {}, // 失去焦点事件
    onEditorFocus(e) {}, // 获得焦点事件
    onEditorChange(e) {},
    handleCheckAllChange(val) {
      const ids = []
      for (let i = 0; i < this.projects.length; i++) {
        ids.push(this.projects[i].id)
      }
      this.addForm.projectIds = val ? ids : []
      this.isIndeterminate = false
    },
    handleCheckedChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.projects.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.projects.length
    },
    comeBack() {
      this.$router.go(-1)
    },
    submitData() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.loading = true
          createNotice(this.addForm).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '创建成功!',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
              this.$router.push('/systemManagement/notice')
            } else {
              this.$message({
                type: 'error',
                message: res.msg || 'error',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
 .title{
    // width: 95%;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    padding: 32px 0 20px 30px;
    border-bottom: 1px solid rgba(221,221,221,0.2);
 }
 .view{
  //  width: 30%;
    margin: 45px 0 0 28px;
    .titleHeader{
      font-size:14px;
      font-weight:400;
      color:rgba(247,181,0,0.8);
    }
    .edit_container{
      // width: 900px;
          color: #fff;
      width: 92%;
      margin: 22px 0 auto;
      color: #fff;
    }
    .content{
      margin: 20px 0 0 -100px;
    }
    .text{
      margin-right: 40px;
      font-size:14px;
      font-weight:400;
      color:rgba(255,255,255,0.65);
    }
    .btnsubmit{
        text-align: center;
        margin: 60px auto 0 auto;
        padding-bottom: 40px;
        .create{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          width:60px;
          height:32px;
          margin-right: 5px;
          background:#F7B500;
        }
        .cancel{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,0.8);
          width:60px;
          height:32px;
          background:#F7B500;
          opacity:0.4;
        }
      }
 }
}
</style>
